export function makeAddControl(rule, uniqueId) {
  return {
    type: 'button',
    field: 'addControl',
    children: ['添加组合控件'],
    on: {
      click() {
        const Vue = new require('vue')
        const addControlD = Vue.extend({
          template: `<el-dialog :visible="visible" id="temp-dialog" :before-close="handleClose">
                <el-form label-width="100px" :rules="rules" ref="control" :model="control">
                  <el-form-item label="控件名称" prop="title">
                    <el-input v-model="control.title"/>
                  </el-form-item>
                  <el-form-item label="控件类型">
                     <el-select v-model="control.type" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                   <el-form-item label="选项数据" v-if="control.type!=='input'" prop="addop">
                    <el-input v-for="(v,i) of control.addop" :key="i" v-model="v.value" style="margin-bottom:13px;width:217px;display:block"" >
                      <i style="font-size:20px;cursor:pointer" slot="suffix" class="el-icon-circle-plus-outline" @click="control.addop.push({ value: '' })"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item >
                    <el-button type="primary" @click="submitForm">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog >`,
          data() {
            const validateAddop = (_, value, callback) => {
              if (
                value.filter(item => {
                  if (item.value.trim()) return item
                }).length === 0
              ) {
                callback(new Error('请输入至少一个选项'))
              } else callback()
            }
            return {
              visible: true,
              control: {
                title: '',
                type: 'input',
                addop: [{ value: '' }]
              },
              options: [
                { value: 'input', label: '输入框' },
                { value: 'select', label: '选择器' },
                { value: 'radio', label: '单选框' },
                { value: 'checkbox', label: '复选框' }
              ],
              rules: {
                title: [
                  {
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                  }
                ],
                addop: [
                  {
                    validator: validateAddop,
                    trigger: 'blur'
                  }
                ]
              }
            }
          },
          methods: {
            handleClose() {
              this.visible = false
            },
            async submitForm() {
              const validate = await this.$refs.control.validate().catch(_ => _)
              if (!validate) return
              const options = this.control.addop
                .filter(item => item.value.trim())
                .map(item => {
                  if (item.value.trim()) {
                    return {
                      value: item.value,
                      label: item.value
                    }
                  }
                })
              rule.control.push({
                handle: () => true,
                rule: [
                  {
                    type: this.control.type,
                    field: uniqueId(),
                    title: this.control.title,
                    effect: { parent: rule.field },
                    hidden: false,
                    display: true,
                    value: null,
                    options,
                    update(_, rule, fApi) {
                      const parent = fApi.getRule(rule.effect.parent)
                      if (parent.effect.req) {
                        rule.$required = `请填写${rule.title}`
                      } else {
                        rule.$required = false
                      }
                    }
                  }
                ]
              })
              this.visible = false
            }
          }
        })
        new addControlD().$mount('#temp-dialog')
      }
    }
  }
}
